﻿<!DOCTYPE HTML>
<html>

<head>
	<title>使用Selector API实现购物车客户端计算</title>
	<meta charset="utf-8" />
	<style>
		table {
			width: 600px;
			text-align: center;
			border-collapse: collapse;
		}

		td,
		th {
			border: 1px solid black
		}

		td[colspan="3"] {
			text-align: right;
		}
	</style>

</head>

<body>
	<table id="data">
		<thead>
			<tr>
				<th>商品名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>iPhone6</td>
				<td>¥4488.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>¥4488.00</td>
			</tr>
			<tr>
				<td>iPhone6 plus</td>
				<td>¥5288.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>¥5288.00</td>
			</tr>
			<tr>
				<td>iPad Air 2</td>
				<td>¥4288.00</td>
				<td>
					<button>-</button>
					<span>1</span>
					<button>+</button>
				</td>
				<td>¥4288.00</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3">Total: </td>
				<td>¥14064.00</td>
			</tr>
		</tfoot>
	</table>
	<script>
		//1. 查找触发事件的元素
		//本例中: 用户点击table中的button触发变化
		//1.1 先查找id为data的table
		var table=document.getElementById("data")
		//1.2 再在table下查找所有的按钮
		var btns=
			table.getElementsByTagName("button")
		console.log(btns);
		//2. 绑定事件处理函数
		//本例中: 因为所有的按钮都要绑定单击事件，所以需要遍历找到的每个按钮
		for(var btn of btns){
			//每遍历一个按钮，就为这个按钮绑定单击事件处理函数
			btn.onclick=function(){
				//this->当前正在触发事件的按钮元素对象
				//3. 查找要修改的元素
				//本例中: 点任何按钮，都是要修改旁边的span
				//    当前按钮的父元素      的孩子们中第二个
				var span=this.parentElement.children[1];
				//4. 修改元素
				//4.1 取出元素中现在的旧值，转为整数
				var n=parseInt(span.innerHTML);
				//4.2 计算出新值
				//如果点的按钮的内容是+
				if(this.innerHTML=="+"){
					n++;//就将n+1
				}else if(n>1){//否则如果点的按钮的内容是-,且只有n>1时
					n--;//才将n-1
				}
				//4.3 再将新值放回元素中
				span.innerHTML=n;

				/*数量修改，修改小计*/
				//3. 查找要修改的元素
				//本例中: 查找当前按钮所在行的最后一个td
				var lastTd=
					this.parentElement.nextElementSibling;
				//当前按钮的父元素td 的下一个兄弟元素td
				//4. 修改元素
				//4.1 从当前按钮的父元素td的前一个兄弟元素td中获得单价字符串，去掉开头的¥，再转为小数，获得单价
				var price=parseFloat(//转为小数
					this.parentElement//当前按钮的父元素td
							.previousElementSibling//的前一个兄弟元素td
							.innerHTML//的内容
							.slice(1)//去掉开头的¥符号
				)
				//4.2 用单价*数量=小计
				var subTotal=price*n;
				//4.3 将小计放回当前行最后一个td的内容中
				lastTd.innerHTML=`¥${subTotal.toFixed(2)}`
			}
		}

			


	</script>
</body>

</html>